<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>登录 - 协同会议平台</title>
	<!-- 引入Element UI的CSS -->
	<!--<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
	<!--本地CSS-->
	<link rel="stylesheet" href="css/index.css">
	<link rel="stylesheet" href="css/element.css">
	<!-- 引入组件库 -->
	<style>
		body {
			background: linear-gradient(135deg, #74ebd5 0%, #ACB6E5 100%); /* 渐变色 */
			overflow: hidden;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100vh;
			margin: 0;
			color: #fff; /* 设置文本颜色为白色以匹配渐变背景 */
		}
		.login-container {
			width: 400px;
			background-color: rgba(255, 255, 255, 0.9);
			padding: 20px;
			border-radius: 8px;
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
		}
		.login-title {
			text-align: center;
			margin-bottom: 20px;
		}
		.login-title h3 {
			font-size: 24px;
			font-weight: bold;
			color: #000; /* 设置标题颜色为黑色以确保对比度 */
			letter-spacing: 2px;
		}
		.login-title p {
			color: #555; /* 设置描述文字颜色 */
		}
	</style>
	<link rel="stylesheet" href="css/element.css">
</head>
<body>
<div class="login-container" id="app">
	<div class="login-title">
		<h3>协同会议平台</h3>
		<p>请输入您的信息:</p>
	</div>
	<el-form :model="loginForm" status-icon :rules="rules" ref="loginForm" label-width="0px" class="demo-ruleForm">
		<el-form-item prop="username">
			<el-input v-model="loginForm.username" placeholder="用户名" prefix-icon="el-icon-user"></el-input>
		</el-form-item>
		<el-form-item prop="password">
			<el-input type="password" v-model="loginForm.password" placeholder="密码" prefix-icon="el-icon-lock"></el-input>
		</el-form-item>
		<el-form-item prop="checkCode">
			<el-row :gutter="10">
				<el-col :span="16">
					<el-input v-model="loginForm.checkCode" placeholder="验证码"></el-input>
				</el-col>
				<el-col :span="8">
					<el-image :src="'/checkCode.jsp?v=' + Math.random()" fit="cover" @click="refreshCaptcha"></el-image>
				</el-col>
			</el-row>
		</el-form-item>
		<el-form-item>
			<el-checkbox v-model="loginForm.rememberMe">记住我</el-checkbox>
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="submitForm('loginForm')" style="width:100%;">登录</el-button>
		</el-form-item>
		<el-form-item>
			<el-row>
				<el-col :span="12">
					<el-link href="forget.html" type="primary">忘记密码?</el-link>
				</el-col>
				<el-col :span="12" style="text-align:right;">
					<el-link href="register.html" type="primary">没有账号?</el-link>
				</el-col>
			</el-row>
		</el-form-item>
	</el-form>
</div>

<!-- 引入Vue.js 和 Element UI的JS -->
<script src="js/vue.min.js"></script>
<script src="js/element.js"></script>
<script>
	new Vue({
		el: '#app',
		data() {
			return {
				loginForm: {
					username: '',
					password: '',
					checkCode: '',
					rememberMe: false
				},
				rules: {
					username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
					password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
					checkCode: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
				}
			};
		},
		methods: {
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						// 提交表单逻辑
						window.location.href = "home.html";
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			refreshCaptcha(event) {
				event.target.src = '/checkCode.jsp?v=' + Math.random();
			}
		}
	});
</script>
</body>
</html>